import './Chat.css';
import React, { useContext, useState, useEffect } from 'react';
import { WebSocketContext } from '../App.js';
import { useLocation } from 'react-router-dom';
import axios from 'axios';
let use = JSON.parse(localStorage.getItem('use'))
const urlParams = new URLSearchParams(window.location.search);


export default function Chat() {
    const [name, setName] = useState('');
    const { ws, messages } = useContext(WebSocketContext); // Directly access WebSocket instance
    const id = useLocation().search.split('=')[1]
    console.log(id);
    let [sbzz, setSbzz] = useState({
        name: '张春阳',
        img_url: "https://ww2.sinaimg.cn/mw690/8695c41fgy1hqmdfaphd8j20u00jy143.jpg"
    })
    let getfirend_use = () => {
        axios.get(`http://localhost:8000/getfirend_use?id=${id}`).then(res => {
            setSbzz(res.data[0])
            console.log(res.data)
        })
    }


    let send_m = () => {
        let send_obj = {
            name: name,
            send_id: id,
            use_id: use._id
        }
        if (ws) {
            ws.send(JSON.stringify(send_obj));  // Send the message only if WebSocket is available
        }
    };

    useEffect(() => {
        getfirend_use()
    },[])
    return (
        <div className="overall">
            <div className="top">
                <div className="top_left">
                    <div className="top_return">
                        <img src="https://cdn7.axureshop.com/demo2024/2309596/images/%E6%B3%A8%E5%86%8C/shape_u154.svg" alt="return" />
                    </div>
                    <div className="top_avater">
                        <img className="avatar" src={sbzz.img_url} alt="avatar" />
                    </div>
                    <div className="top_message">
                        <div className="top_name">{sbzz.name}</div>
                        <div className="top_state">在线</div>
                    </div>
                </div>
                <div className="top_right">
                    <div className="video">
                        <img src="https://cdn7.axureshop.com/demo2024/2309596/images/%E8%81%8A%E5%A4%A9%E7%95%8C%E9%9D%A2/u3921.svg" alt="video" />
                    </div>
                    <div className="telephone">
                        <img src="https://cdn7.axureshop.com/demo2024/2309596/images/%E8%81%8A%E5%A4%A9%E7%95%8C%E9%9D%A2/u3916.svg" alt="telephone" />
                    </div>
                </div>
            </div>
            {messages.map((message, index) => {
                return <div className="lf_content">
                    {use._id != message.send_id ? <div className="massges_item">
                        <div className="message_avater">
                            <img src="https://ww2.sinaimg.cn/mw690/8695c41fgy1hqmdfaphd8j20u00jy143.jpg" alt="message avatar" />
                        </div>
                        <div className="lf_message">{message.send_name}</div>
                    </div> :
                        <div className='massges_item'>
                            <div className='lf_message_ritht'>
                                {message.send_name}
                            </div>
                        </div>
                    }
                </div>
            })}
            <div className="lf_bottom">
                <div className="chat-input-container">
                    <div className="voice-icon">🔊</div>
                    <input
                        value={name}
                        onChange={(e) => { setName(e.target.value); }}
                        type="text"
                        className="chat-input"
                        placeholder="请输入聊天内容~"
                    />
                    <span onClick={() => send_m()} style={{ 'fontSize': '15px' }}>发送</span>
                    <div className="attachment-icon">➕</div>
                </div>
            </div>
        </div>
    );
}
